<template>
    <div class="tip">
        <!-- 常见科室结构 -->
        <div class="department">
            <div class="header">
                <div class="left">
                    <img src="@/assets/全科.png" alt="">
                    <span>常见科室</span>
                </div>
                <div class="right" @click="alt">
                    <span>全部</span>
                    <img src="@/assets/右侧.png" alt="">
                </div>
            </div>
            <div class="content" @click="alt">
                <ul>
                    <li>神经内科</li>
                    <li>消化内科</li>
                    <li>呼吸内科</li>
                    <li>内科</li>
                    <li>神经外科</li>
                    <li>妇科</li>
                    <li>产科</li>
                    <li>儿科</li>
                </ul>
            </div>
        </div>
        <!-- 平台公告 -->
        <div class="notice">
            <div class="header">
                <div class="left">
                    <img src="@/assets/公告.png" alt="">
                    <span>平台公告</span>
                </div>
                <div class="right" @click="alt">
                    <span>全部</span>
                    <img src="@/assets/右侧.png" alt="">
                </div>
            </div>
            <div class="content" @click="alt">
                <ul>
                    <li>关于2023年9月1日，中国医院等级评测系统正式上线，请大家关注！</li>
                    <li>北京中医药大学东方医院部分科室医生门诊通知</li>
                    <li>武警总医院号源暂停更新通知</li>
                </ul>
            </div>
        </div>
        <div class="notice">
            <div class="header">
                <div class="left">
                    <img src="@/assets/通知.png" alt="">
                    <span>停诊公告</span>
                </div>
                <div class="right" @click="alt">
                    <span>全部</span>
                    <img src="@/assets/右侧.png" alt="">
                </div>
            </div>
            <div class="content" @click="alt">
                <ul>
                    <li>中国任命解放军总医院第六医学中心呼吸内科门诊停诊公告</li>
                    <li>首都医科大学附属北京潞河医院老年医学门诊停诊公告</li>
                    <li>中西医结合心内科停诊公告</li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts" name="Tip">
    let alt = ()=>{
        alert('暂无内容')
    }
</script>

<style scoped>
    *{
        padding:0;
        margin:0;
        box-sizing: border-box;
        font-size: 14px;
    }
    .tip{
        color: #7f7f7f;
    }
    .department {
        .header {
            display: flex;
            justify-content: space-between;
            .left, .right {
                display: flex;
                align-items: center;

                img {
                    width: 24px;
                    height: 24px;
                    margin-right: 8px;
                }
            }
            .right:hover{
                cursor: pointer;
                color: #55a6fe;
            }
        }
        .content {
            ul {
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                list-style: none;
                li {
                    width: 40%;
                    margin-top: 10px;
                }
                li:hover{
                    cursor: pointer;
                    color: #55a6fe;
                }
            }
        }
    }
    .notice{
        margin-top: 20px;
        .header{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .left, .right {
                display: flex;
                align-items: center;

                img {
                    width: 15px;
                    height: 15px;
                    margin-right: 8px;
                }
            }
            .right:hover{
                cursor: pointer;
                color: #55a6fe;
            }
        }
        .content{
            ul{
                list-style-type: decimal;
                li{
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    margin: 10px 0;
                }
                li:hover{
                    cursor: pointer;
                    color: #55a6fe;
                }
            }
        }
    }
</style>